<template>
<div class="register">
    <div class="Register">
        <div class="container-fluid">

            <div class="row">

                <div class="col-md-4" style="padding:0">
                    <div>
                        <b-carousel id="carousel-fade" style="text-shadow: 0px 0px 2px #000" fade indicators img-width="1024px" img-height="480">
                            <b-carousel-slide img-src="http://pic1.win4000.com/mobile/d/5580ea324847f.jpg" style="opacity:0.3"></b-carousel-slide>
                            <b-carousel-slide img-src="http://pic1.win4000.com/mobile/d/5580ea335a58a.jpg" style="opacity:0.3"></b-carousel-slide>
                            <b-carousel-slide img-src="http://pic1.win4000.com/mobile/d/5580ea31309af.jpg" style="opacity:0.3"></b-carousel-slide>
                        </b-carousel>
                    </div>
                </div>
                <div class="col"></div>
                <div class="col-md-3 mt-5 ">

                    <b-form class="my-5">

                        <h1 class="my-4">欢迎注册未来社区</h1>
                        <h3>每一天,乐在沟通</h3>
                        <b-form-group id="input-group-username" label="昵称:" label-for="input-username" class="my-4">
                            <b-form-input id="input-username" v-model="user.username" type="text" required></b-form-input>
                        </b-form-group>

                        <b-form-group id="input-group-password" label="密码:" label-for="input-password" class="my-4">
                            <b-form-input id="input-password" v-model="user.password" type="password" required></b-form-input>
                        </b-form-group>
                        <b-form-group id="input-group-confirmPassword" label="确认密码:" label-for="input-confirmPassword" class="my-4">
                            <b-form-input id="input-confirmPassword" v-model="user.confirmPassword" type="password" required></b-form-input>
                        </b-form-group>
                        <div class="row">
                            <div class="col-sm-8">
                                <b-form-group id="input-group-phone" label="手机号码:" label-for="input-phone" class="my-4">
                                    <b-form-input id="input-phone" @change="verify" v-model="user.phone" type="text" required></b-form-input>
                                </b-form-group>
                            </div>
                            <div class="col-sm-4">
                                <b-button class="btn btn-outline-primary mt-5" @click="validationCode">获取验证码</b-button>
                                <!-- <b-form-input id="input-smsCode" v-model="user.smsCode" type="text" required></b-form-input> -->
                            </div>
                            <div class="col-sm-8">
                                <b-form-group id="input-group-smsCode" label="手机验证码:" label-for="input-smsCode" class="my-4">
                                    <b-form-input id="input-smsCode" v-model="user.smsCode" type="text" required></b-form-input>
                                </b-form-group>
                            </div>
                        </div>

                        <b-button variant="primary" class="my-4" @click="Register ">注册新用户</b-button>
                        <router-link to="/login">已有账号？去登陆</router-link>
                    </b-form>
                </div>
                <div class="col">

                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "Register",
    data() {
        return {
            user: {
                phone: "",
                confirmPassword: "",
                password: "",
                username: "",
                smsCode: ""
            },
        };
    },
    methods: {
        validationCode() {
            console.log(this.user.phone);
            if (this.user.phone) {
                this.$userApi.sms(this.user.phone).then((res) => {
                    console.log(res);
                    if (res.ret == 200) {
                        this.$message({
                            message: res.data.sms,
                            type: 'success'
                        })
                    }
                })
            }
        },
        Register() {
            if (this.user.phone && this.user.confirmPassword && this.user.password && this.user.username && this.user.smsCode) {
                this.$userApi.register(this.user).then((res) => {
                    console.log(res);
                    if (res.ret == 200) {
                        this.$message({
                            message: '恭喜你，注册成功',
                            type: 'success',
                        })
                        this.$router.push({
                            name: "Login"
                        })
                    } else {
                        if (res.username) {
                            this.$message({
                                message: res.username,
                                type: 'error',
                                offset: 60

                            })
                        }
                        if (res.password) {
                            this.$message({
                                message: res.password,
                                type: 'error',
                                offset: 120
                            })
                        }
                        if (res.smsCode) {
                            this.$message({
                                message: res.smsCode,
                                type: 'error',
                                offset: 180

                            })
                        }
                    }

                })
            }
        },
        verify() {
            if (this.user.phone) {
                this.$userApi.verifyPhone(this.user.phone).then((res) => {
                    if (res.ret == 200) {
                        this.$message({
                            message: '该手机号未注册',
                            type: 'success'
                        });
                    } else {
                        this.$message(res.phone);
                    }

                })
            }
        }
    }
};
</script>

<style lang="scss">
.register {
    background-image: url("../assets/register-background.jpg");
    background-position: center 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;

    .Register {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .form-control {
        background-color: transparent;
        border: 1px solid white;
    }

    .form-control:focus {
        background-color: transparent;
        border-color: white;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}
</style>
